@import '../../../../css/h5/common';
.login-container {
  .login-form-container {
    width: 630/@rem;
    height: 720/@rem;
    background: #4887ff;
    .login-logo {
      width: 630/@rem;
      height: 344/@rem;
    }
  }
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 90;
  background-color: rgba(0, 0, 0, .7);
  /*opacity: 0.3; 
  filter:alpha(opacity=30);*/
}

.login-container {
  position: absolute;
  z-index: 101;
  left: 50%;
  top: 0;
  .transform(translateX(-50%));
  /* 使之可以滚动 */
  overflow-y: scroll;
  /* 增加该属性，可以增加弹性 */
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  .login-close {
    display: block;
    position: relative;
    width: 630/@rem;
    height: 80/@rem;
    img {
      position: absolute;
      top: 0;
      right: 0;
      width: 60/@rem;
      height: 80/@rem;
    }
  }
  .login-form-container {
    position: relative;
    .border-radius(12/@rem);
    width: 630/@rem;
    height: 720/@rem;
    .login-logo {
      width: 630/@rem;
      height: 344/@rem;
    }
    .form-container {
      width: 630/@rem;
      height: auto;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .login-form-content {
      position: relative;
      .form-content {
        position: absolute;
        left: 40/@rem;
        bottom: 140/@rem;
        .form-box {
          .error {
            display: inline-block;
            margin-top: 20/@rem;
            color: #fff;
            font-size: 24/@rem;
            padding-left: 44/@rem;
            &.hide {
              display: none;
            }
          }
        }
        .mb20 {
          margin-bottom: 20/@rem;
        }
        .form-group {
          display: block;
          width: 550/@rem;
          height: 88/@rem;
          .border-radius(44/@rem);
          background: #fff;
          padding-left: 44/@rem;
          .user-name,
          .user-pwd {
            /* display: inline-block; */
            width: 462/@rem;
            padding: 26/@rem 0;
            font-size: 26/@rem;
            color: #4887ff;
            border: none;
          }
          .placeholder(#4887ff, input);
        }
      }
      .btn-login {
        position: absolute;
        left: 0;
        bottom: -1px;
        .btn {
          .border-bottom-left-radius(12/@rem);
          .border-bottom-right-radius(12/@rem);
          width: 630/@rem;
          ;
          display: inline-block;
          height: 90/@rem;
          line-height: 90/@rem;
          text-align: center;
          background: #fa4384;
          font-size: 38/@rem;
          color: #fff;
        }
      }
    }
  }
  .register-container {
    width: 240/@rem;
    margin: 0 auto;
    text-align: center;
    margin-top: 50/@rem;
    span,
    .register {
      display: inline-block;
      color: #fff;
    }
    span {
      font-size: 26/@rem;
    }
    .register {
      font-size: 24/@rem;
      width: 80/@rem;
      height: 34/@rem;
      line-height: 30/@rem;
      .border-radius(16/@rem);
      border: 3/@rem solid #fff;
    }
  }
}